import 'nprogress/nprogress.css';
import {
    start,
    done,
    configure
} from 'nprogress';
import delay from '@/utils/delay.js';

configure({
    showSpinner: false,
    trickleSpeed: 20
});

/**
 * 请求一个异步的组件
 */
function getComponent(callback) {
    return async () => {
        // 开启进度条
        start();

        // 判断是否在生产环境中
        if (process.env.NODE_ENV === 'development') {
            await delay(2000);
        }

        // 执行 import 函数
        let comp = await callback();

        // 进度条结束
        done();

        // 返回组件
        return comp;
    }
}

const routes = [{
        name: 'Home', // 组件名
        path: '/', // 匹配的路由地址
        component: getComponent(() => import('@/view/Home')), // 匹配的组件
        meta: { // meta 元数据
            keepAlive: true, // 是否开启组件缓存
            title: '首页' // 组件的 title 值
        }
    },
    {
        name: 'Blog',
        path: '/blog',
        component: getComponent(() => import('@/view/Blog')),
        meta: {
            keepAlive: false,
            title: '文章列表'
        }
    },
    {
        name: 'BlogDetail',
        path: '/blog/:blogId', // 动态路由 blogId
        component: getComponent(() => import('@/view/Blog/BlogDetail')),
        meta: {
            keepAlive: false,
            title: '文章详情'
        }
    },
    {
        name: 'BlogType',
        path: '/blog/cate/:cateId', // 动态路由 cateId
        component: getComponent(() => import('@/view/Blog')),
        meta: {
            keepAlive: false,
            title: '文章分类'
        }
    },
    {
        name: 'About',
        path: '/about',
        component: getComponent(() => import('@/view/About')),
        meta: {
            keepAlive: false,
            title: '关于我'
        }
    },
    {
        name: 'Project',
        path: '/project',
        component: getComponent(() => import('@/view/Project')),
        meta: {
            keepAlive: false,
            title: '我的项目'
        }
    },
    {
        name: 'Chat',
        path: '/chat',
        component: getComponent(() => import('@/view/Chat')),
        meta: {
            keepAlive: false,
            title: '留言板'
        }
    },
    {
        name: '404',
        path: '/404',
        component: getComponent(() => import('@/view/404')),
        meta: {
            keepAlive: false,
            title: '404-页面不存在'
        }
    },
]
export default routes;